<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sugar</title>
  </head>

  <body>
    <form id="form">
      <!-- name="username"  是按照接口文档的请求参数书写的 -->
      <input name="username" type="text" placeholder="请输入用户名" />
      <input name="password" type="password" placeholder="请输入密码" />
      <button type="submit">提交表单</button>
    </form>

    <script>
      const button = document.querySelector('[type="submit"]')

      button.onclick = function (e) {
        e.preventDefault()
        // FormData 如果传入一个 form 对象，
        //  自动获取所有 name 属性的表单值，注意 name 属性应该还是要面向接口编程（请求参数）
        const form = document.querySelector('#form')
        const fd = new FormData(form)

        // fd 遍历
        fd.forEach((value, key) => {
          console.log(key, value)
        })
      }
    </script>
  </body>
</html>
